<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1.渲染学生列表 -->
    1单独封装一个函数，方便后面多次调用，利用axios把学生列表数据请求下来然后用map遍历每一项的data，
    2返回值用模板字符串形式return一个tr的内容结构，把里面的数据用item.数据名称替换掉，变成数据库里面的数据，
    3把返回值给到tbody的innerhtml
  <!-- 2.删除和编辑学员 -->
  <!-- 删除 -->
   1利用事件委托给list绑定点击事件
   2利用e.target.classList.contains判断是否有bi-trash 类名
   3先给删除的i标签添加自定义属性值data-id=${item.id},把id结构出来
   4如果有这个类名的话就调删除学员的接口删除学员并重新渲染学生列表
  <!-- 编辑 -->
   5如果有'bi-pen类名则是修改学员，获取元素并且修改标题为编辑学员
   6给修改的i标签设置自定义属性值为item.id，再次获取id，并把提交的确认按钮的自定义属性值设置为id
   7modal.show设置为true
  <!-- 3.表单提交 新增或者修改 -->
   1利用bootstrap生成一个modal弹窗
   2获取添加按钮并且绑定点击事件
   3 修改左上角标题为新增学员
   4新增界面的确认按钮自定义属性值设置为add
   5modal.show()//显示弹窗
   6给确认按钮绑定点击事件并且获取data自定义属性值
   7判断id是否全等于add，等于的话就是新增 
   8获取form表单内所有填写数据，把所有规定number类型的数据转化为number型
   9引入新增接口进行新增功能，modal.hide()将弹窗隐藏
   10再次渲染页面
   <!-- 修改 -->
   判断id是否全等于add，等于的话就是新增，否则(修改)
  <!-- 4.获取省市区数据 -->
  <!-- 省 -->
  封装函数，实参默认是空字符串，调取省份的接口，map方法用在res.data上来获取所有的省份，将返回值给到省份的容器
  <!-- 市 -->
  步骤如上，多个第一步先把省份的参数获取过来，也就是省份按钮的value
  接着掉接口，获取对应省份下面的市，map遍历市结构返回值给到市的innerhtml
  <!-- 区 -->
  步骤同上，多一个获取省和市的value,因为这是区接口的两个参数

  将省市区竖式调用，达到分批次执行的效果
  <!-- 5.省市区联动效果 -->
  1给省添加change事件，重新调用市和区的函数
  2给市添加change事件，重新调用区的函数
</body>
</html>